<template>
    <div>
        <h2>演示v-if指令</h2>
        <p v-if="show">这段文本可以显示和隐藏</p>
        <button v-on:click="toggle" style="cursor: pointer; background-color: #42b983">显示开关</button>

        <h2>演示v-bind指令</h2>
        <a v-bind:href="url" target="_blank">链接</a>

        <h2>演示v-on:dblclick指令</h2>
        <button v-on:dblclick="toggleDblclick" style="cursor: pointer; background-color: #42b983">双击开关</button>

        <h2>演示v-on:keyup.enter指令</h2>
        输入框获取焦点之后，回车键放松可展现效果<input v-on:keyup.enter="toggle"/>

        <h2>演示v-on:mousemove指令</h2>
        <span v-on:mousemove="toggle" style="cursor: pointer; background-color: #42b983">划过</span>

        <h2>演示v-if指令</h2>
        <p v-if="choice === 1">choice === 1</p>
        <p v-else-if="choice === 2">choice === 2</p>
        <p v-else>choice 为其他值</p>


        <h2>演示v-if指令配合template</h2>
        <template v-if="choice === 1">
            <p>第一行</p>
            <p>第二行</p>
        </template>
        <button v-on:click="toggleChoice" style="cursor: pointer; background-color: #42b983">更改选项</button>


        <h2>演示数组v-for in指令</h2>
        <ul>
            <li v-for="book in books">{{ book.name }}</li>
        </ul>

        <h2>演示数组v-for in 指令, 附带index</h2>
        <ul>
            <li v-for="(book, index) in books">{{ index }} , {{ book.name }}</li>
        </ul>

        <h2>演示数组v-for of指令</h2>
        <ul>
            <li v-for="book of books">{{ book.name }}</li>
        </ul>

        <h2>演示对象属性v-for in指令</h2>
        <ul>
            <li v-for="(attr, key, index) in user">{{index}}. {{ key }} : {{ attr }}</li>
        </ul>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                show: true,
                url: "http://www.baidu.com",
                choice: 2,
                books: [
                    {name: '《Vue.js》'},
                    {name: '《Javascript》'},
                    {name: '《Java》'}
                ],
                user: {
                    name: "晓哥",
                    gender: "男"
                }
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            toggle() {
                this.show = !this.show;
            },
            toggleDblclick() {
                this.toggle();
            },
            toggleChoice() {
                this.choice ++;
                if(this.choice > 3) {
                    this.choice = 1;
                }
            }
        }
    }
</script>